<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>主页</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/index.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin" id="app">

        <!--头部导航栏-->
        <div class="layui-header">
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <div class="layui-logo layui-hide-xs layui-icon "><strong style="font-size: 20px;">&#xe6b2;问卷调查系统</strong>
            </div>
            <ul class="layui-nav layui-layout-right">
                <li
                    class="layui-nav-item layui-hide layui-show-md-inline-block layui-show-xs-inline-block layui-show-sm-inline-block">
                    <a href="javascript:;" id="{{userId}}">
                        <img src="../static/imgs/CE07A45DDC0071177B92422296BB0D81.png" class="layui-nav-img">
                        {{userName}}
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="" id="logout">登出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>




        <!--页面显示-->
        <div class="layui-body" style="left: 0rem;">
            <!--body导航栏-->
            <div>
                <ul class="layui-nav" lay-filter="">
                    <li class="layui-nav-item layui-this"><a href="">总调查样本 {% raw %}{{list.length}}{% endraw %}</a></li>
                </ul>
            </div>

            <!--首页-->
            <div class="layui-container">

                <div class=" layui-row layui-col-md1">
                    &nbsp;
                </div>

                <div class="layui-row layui-col-md10">

                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                        <div class="layui-card" style="margin:20px 20px 0px 0px;">

                            <div class="layui-card-body" style="height: 170px; border:1px #4DD0C8 solid;">
                                <a href="/addQuestionnaire" class="layui-icon"
                                    style="display: flex;justify-content:center;padding-top: 35%; font-size: 50px;">&#xe624;</a>
                            </div>
                        </div>
                    </div>


                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md3" v-for="item in list" :id='item.questId' >
                        <div class="layui-card " style="margin:20px 20px 0px 0px;height: 190px;border:1px #4DD0C8 solid;">
                            <div class="layui-card-header" style="text-align: center;border-bottom: 1px solid #4DD0C8 ;">
                                {% raw %}{{item.themename}}{% endraw %}
                            </div>
                            <div class="layui-card-body" style="margin-top: 20px;">
                                <label for="">创建人:{% raw %}{{item.userName}}{% endraw %}</label>
                                <br>
                                <label for="">创建时间:{% raw %}{{item.createAt}}{% endraw %}</label>
                            </div>
                            <div style=" display: flex;justify-content: center;">
                                <div style="display:inline-block;">
                                    <button @click="share(item.questId)">查看</button>
                                </div>
                            </div>
                        </div>
                    </div>                    
                </div>

                <div class="layui-row layui-col-md1">
                    &nbsp;
                </div>
            </div>


        </div>

        <div class="layui-footer" style="left: 0rem;">
            <!-- 底部固定区域 -->
            <P style="text-align: center;">备案号</P>
        </div>

    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <script>

        let app = new Vue({
            el: '#app',
            data: {
                list: []
            },
            mounted: function () {
                // 数据初始化
                axios.post('/indexInit',)
                    .then(res => {
                        res = res.data
                        this.list = res
                    })
            },
            updated: function () {
                console.log(this.list);
            },
            methods: {
                // 分享按钮
                share: function (questId) {
                    axios({
                        method: 'post',
                        url: '/shareDeno',
                        data: { questId }
                    }).then(function (res) {
                        res = res.data
                        if (res.code === 200) {
                            window.location.href = '/share'
                        }
                    })
                }
            }
        });

        $('#logout').click(function () {
            axios({
                method: 'post',
                url: '/logout',
            }).then(function (res) {
                res = res.data
                if (res.code === 200) {
                    window.location.href = '/'
                }
            })
        })
    </script>


</body>

</html>